// 事件统计
<template>
  <div class="environmental">
    <comTitle class="flex">
      <template #title> 事件统计 </template>
    </comTitle>
    <div class="echarts">
      <statisticsTableHeader class="mb-10"></statisticsTableHeader>
      <scroll class="econtent">
        <div class="box1 boxright boxbottom box1color">
          <div class="box1one flex flex1 mb-22">
            <div class="oneItem flex-common mr-48">
              <div class="imgs mr-32">
                <img src="@/assets/images/analysis/analysis_item1.svg" alt="" />
              </div>
              <div class="itemright">
                <div class="fs-20 cr-hui3 bold mb-6">自动检测事件</div>
                <div class="fs-32 cr-cs bold">
                  <span class="familyA">5000</span>
                  <span class="cr-hui4 fs-16 ml-6">件</span>
                </div>
              </div>
              <div class="itemline"></div>
            </div>
            <div class="oneItem flex-common">
              <div class="imgs mr-32">
                <img src="@/assets/images/analysis/analysis_item2.svg" alt="" />
              </div>
              <div class="itemright">
                <div class="fs-20 cr-hui3 bold mb-6">人工上报事件</div>
                <div class="fs-32 cr-huang bold">
                  <span class="familyA">5000</span>
                  <span class="cr-hui4 fs-16 ml-6">件</span>
                </div>
              </div>
              <div class="itemline line2"></div>
            </div>
          </div>
          <div class="box1two flex2">
            <div class="box1twotitle bold fs-16" style="color: #5f717d">
              事件区域分布
            </div>
            <div class="flex box1twoechart">
              <div class="center_chart">
                <div id="Gas"></div>
              </div>
              <div class="end-right">
                <div
                  class="flex-around mb-4"
                  v-for="(item, index) in chart3d"
                  :key="item.name"
                >
                  <div class="flex-start">
                    <div :class="`spot${index}`"></div>
                    <span class="fs-12 cr-hui3">{{ item.name }}</span>
                  </div>
                  <div>
                    <span
                      class="fs-20 familyD"
                      :style="{ color: item.color }"
                      >{{ item.y }}</span
                    >
                    <span class="fs-14 cr-hui4 ml-12">%</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="box1 boxbottom">
          <charts :option="areacharge" />
        </div>
        <div class="box1 boxright">
          <charts :option="eventChart" />
        </div>
        <div class="box1">
          <charts :option="righteventChart" />
        </div>
      </scroll>
    </div>
  </div>
</template>

<script>
export default {
  name: "eventStatistics",
  components: {
    statisticsTableHeader: () => import("../statisticsTableHeader"),
  },
  data() {
    return {
      areacharge: {},
      eventChart: {},
      righteventChart: {},
      complete: {
        其他: 9,
        能耗监测: 6,
        环境监测: 6,
        视频: 5,
        门禁: 4,
        耗材柜: 3,
        检测设备: 2,
      },
      chart3d: [
        {
          name: "环境大楼",
          y: 40,
          color: "#00D4B9",
        },
        {
          name: "化工大楼",
          y: 30,
          color: "#F7A515",
        },
        {
          name: "生物大楼",
          y: 20,
          color: "#5699FF",
        },
        {
          name: "机械大楼",
          y: 10,
          color: "#FF7D7D",
        },
      ],
    };
  },
  mounted() {
    this.initareacharge(this.complete);
    this.get3dChart();
    this.initEvent();
    this.initrightEvent();
  },
  methods: {
    // 事件类型分布
    initEvent() {
      this.eventChart = {
        title: {
          text: "事件类型分布",
          textStyle: {
            color: "#5F717D",
            fontSize: 16,
          },
          top: 20,
          left: "center",
        },
        grid: {
          height: "72%",
          left: "14%",
          right: "10%",
        },
        xAxis: {
          type: "category",
          data: ["设备离线", "功率异常", "其他"],
          minInterval: 2,
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#5F717D",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#FF9C66",
            },
          },
          nameTextStyle: {
            color: "#5F717D",
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "#5F717D",
            },
          },
          name: "事件数量 / 件",
          nameTextStyle: {
            color: "#737373",
            verticalAlign: "bottom",
            align: "right",
          },
          splitLine: {
            lineStyle: {
              color: "#e5e5e5",
              type: "dashed",
            },
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            data: [60, 72, 85],
            type: "bar",
            barWidth: 48,
            itemStyle: {
              barBorderRadius: [0],
              color: "#FF9C66",
            },
            label: {
              show: true,
              position: "top",
              position: "top",
              color: "#FF9C66",
            },
          },
        ],
      };
    },
    // 事件类型分布
    initrightEvent() {
      this.righteventChart = {
        title: {
          text: "事件类型分布",
          textStyle: {
            color: "#5F717D",
            fontSize: 16,
          },
          top: 20,
          left: "center",
        },
        grid: {
          height: "72%",
          left: "14%",
          right: "10%",
        },
        xAxis: {
          type: "category",
          data: ["未处理", "已处理"],
          minInterval: 2,
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#5F717D",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#00BFB1",
            },
          },
          nameTextStyle: {
            color: "#5F717D",
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "#5F717D",
            },
          },
          name: "事件数量 / 件",
          nameTextStyle: {
            color: "#737373",
            verticalAlign: "bottom",
            align: "right",
          },
          splitLine: {
            lineStyle: {
              color: "#e5e5e5",
              type: "dashed",
            },
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            data: [
              {
                value: 60,
                itemStyle: {
                  color: "#F9708B",
                },
                label: {
                  show: true,
                  position: "top",
                  position: "top",
                  color: "#F9708B",
                },
              },
              {
                value: 86,
                itemStyle: {
                  color: "#24E3A6",
                },
                label: {
                  show: true,
                  position: "top",
                  position: "top",
                  color: "#24E3A6",
                },
              },
            ],
            barWidth: 48,
            type: "bar",
          },
        ],
      };
    },
    /* 设备类型分布 */
    initareacharge(data) {
      if (Object.values(data).length > 0) {
        this.areacharge = {
          grid: {
            height: "72%",
            left: "14%",
            right: "10%",
          },
          title: {
            text: "设备类型分布",
            textStyle: {
              color: "#5F717D",
              fontSize: 16,
            },
            top: 20,
            left: "center",
          },
          xAxis: {
            minInterval: 2,
            axisLine: {
              show: false,
              lineStyle: {
                color: "#5F717D",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "#e5e5e5",
                type: "dashed",
              },
            },
            type: "value",

            nameTextStyle: {
              color: "#8B9AA7",
            },
          },
          textStyle: {
            color: "#8B9AA7",
          },
          yAxis: {
            name: "事件数量 / 件",
            nameTextStyle: {
              color: "#737373",
              verticalAlign: "bottom",
              align: "right",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#00BFB1",
              },
            },
            type: "category",
            data: Object.keys(data),
            inverse: false,
          },
          series: [
            {
              label: {
                show: true,
                position: "right",
                position: "right",
                color: "#00BFB1",
              },
              barWidth: 14,
              barGap: "100%",
              itemStyle: {
                barBorderRadius: [0],
                color: "#00BFB1",
              },
              data: Object.values(data),
              type: "bar",
            },
          ],
        };
      }
    },
    /* 3d图表 */
    get3dChart(data = this.chart3d) {
      const Highcharts = require("highcharts");
      require("highcharts/modules/exporting")(Highcharts);
      require("@/assets/js/highcharts-3d.js")(Highcharts);
      Highcharts.chart("Gas", {
        legend: {
          enabled: false,
        },
        chart: {
          type: "pie",
          backgroundColor: "transparent",
          options3d: {
            enabled: true,
            alpha: 60,
          },
        },
        colors: ["#00D4B9", "#F7A515", "#5699FF", "#FF7D7D"],
        plotOptions: {
          pie: {
            innerSize: 80,
            depth: 20,
            slicedOffset: -10,
            dataLabels: {
              enabled: false,
            },
          },
        },
        series: [
          {
            center: [210, 100],
            data: data,
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.environmental {
  height: 100%;
  padding: 0px 24px;
  .echarts {
    width: 100%;
    height: 93%;
    .econtent {
      width: inherit !important;
      padding: 0px 24px;
      height: 82%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      .box1 {
        height: 447px;
        width: 47%;
        background: #f7f8fc;
      }
      .box1color {
        background: #ffffff;
        .box1one {
          width: 100%;
          height: 30%;
          .oneItem {
            padding: 10px 32px;
            background: #f7f8fc;
            position: relative;
            width: 46%;
            .imgs {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 80px;
              height: 80px;
              background: #ffffff;
              border-radius: 50%;
            }
            .itemline {
              right: 0;
              position: absolute;
              width: 36px;
              height: 4px;
              background: #f9708b;
              top: 50%;
              transform: translateY(-50%);
            }
            .line2 {
              background: #fcaa32;
            }
          }
        }
        .box1two {
          width: 100%;
          height: 62%;
          .box1twoechart {
            height: 80%;
          }
          .box1twotitle {
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
          }
          width: 100%;
          background: #f7f8fc;
          .center_chart {
            width: 60%;
            height: 100%;
            position: relative;
            background: url("~@/assets/images/admin/3Dchart_bg3.png") no-repeat;
            background-position: 40% 50%;
            background-size: 60% 70%;
            #Gas {
              height: 100%;
            }
          }
          .end-right {
            width: 40%;
            padding-right: 38px;
            box-sizing: border-box;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .spot {
              width: 12px;
              height: 12px;
              margin-right: 12px;
              border: 3px solid;
            }
            .spot0 {
              @extend .spot;
              background-color: #00d4b9;
              border-color: #b7ede7;
            }
            .spot1 {
              @extend .spot;
              background-color: #f7a515;
              border-color: #f8ddaf;
            }
            .spot2 {
              @extend .spot;
              background-color: #5699ff;
              border-color: #c7d9fd;
            }
            .spot3 {
              @extend .spot;
              background-color: #f9708b;
              border-color: #f9ccd7;
            }
          }
        }
      }
      .boxright {
        margin-right: 3%;
      }
      .boxbottom {
        margin-bottom: 2%;
      }
    }
  }
}
</style>
<style>
.highcharts-exporting-group,
.highcharts-credits,
.highcharts-title {
  display: none;
}
</style>